// 函数组件(无状态组件,hooks出现之前)

// 一般在定义组件的时候会将函数的名字首字母进行大写

let name = '李雷'

let classA = 'active'

//jsx表达式和vue里面的插值表达式几乎写法是一样的,jsx只需要一层大括号,而vue需要两层大括号

//如果组件返回的是null 那么组件的内容不会展示

let flag = true;

//jsx元素不可变 不能直接修改jsx元素的属性

//在jsx中最小的单位就是元素

let el = <h1>一个元素</h1>

// console.log(el)
// el.key = 1

el = <h1 key={1}>一个元素</h1>

function Parent() {
    //组件的结构要返回给函数
    // console.log('parent')
    if (flag) {
        return (
            <div>
                <h1 className={classA}>{name.split('').reverse().join('')}</h1>
                <p>一个普通的组件</p>
            </div>
        )
    } else {
        return null
    }
}

export default Parent